<!DOCTYPE html>
<html lang="zn-en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 100px;
            height: 100px;
            margin: 0 auto;
            background-color: blueviolet;
            padding: 50px;
        }
       .parent .child{
           width: 100px;
           height: 100px;
           background-color: pink;
           
       }
    </style>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            //基本事件
            //点击事件
            // $(".child").click(function(){
            //     console.log(0);
            // })
            // //鼠标事件
            // $(".child").mousemove(function(e){
            //     console.log(e.offsetX,e.offsetY);
            // })
            // //移入
            // $(".child").mouseover(function(){
            //     $(this).css("background-color","red");
            // })
            // //移出
            // $(".child").mouseout(function(){
            //     $(this).css("background-color","pink");
            // })
            // //事件切换
            // $(".child").hover(function(){
            //     $(this).css("background-color","red");
            // },function(){
            //     $(this).css("background-color","pink");
            // }
            // )
            function stopPropagation(e){
               //一般放后面，放前面会把后面事件阻止,最好是另起一个
                e.stopPropagation();//阻止冒泡事件
                e.preventDefault();//阻止默认行为  reset  submit a[href]
                return false;
            }
            
            $(".child").click(function(e){
                
              console.log(".child");  
              //一般放后面，放前面会把后面事件阻止
                e.stopPropagation();//阻止冒泡事件
                e.preventDefault();//阻止默认行为  reset  submit a[href]
                return false;
            })
            $(".parent").click(function(){
              console.log(".parent");  
            })



        })
    </script>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
    
</body>
</html>